<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <div class="box">
        <div class="box1">
            <img src="./images/bas.jpg" alt="" srcset="" width="300">
        </div>
    </div>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px black solid;
        }

        .box1 {
            position: absolute;
        }

        .box1:hover img {
            transition: all .5s;
            transform: scale(1.5, 1.5);
        }
    </style> -->
    <div class="big-box">
        <img src="./images/linux.jpg" >
    </div>
    <style>
        .big-box {
            height: 300px;
            margin-top: 20px;
            margin-left: 30px;
            /* // padding 可以让图片在div上下左右居中,这样图片在放大时,不会被div容器遮挡 */
            padding: 5px 5px 5px 5px;
            overflow: hidden;
        }

        .big-box :hover {
            cursor: pointer;
        }

        .big-box img {
            height: 300px;
            /* //原本的图片的大小，图片原来的大小不变 */
            /* transform: scale(1.1); */
            transition: all 0.6s;
        }

        .big-box img:hover {
            transform: scale(1.5);
            /* //图片按照比例，整体放大了1.2倍
            // 当鼠标经过是图片放大的倍数为1.2倍 */
        }
    </style>
</body>

</html>